<style lang="scss" scoped>
.container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
  background: #fff;
  .item {
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    span {
      color: #666363;
      display: inline-block;
      min-width: 60px;
    }
    input {
      width: 100%;
      text-indent: 10px;
    }
  }
  .mint-popup {
    width: 100%;
    padding-bottom: 65px;
  }
  .auditBtn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin: 100px auto 0;
    outline: none;
    border: none;
    display: block;
  }
  .itemLine::after {
    content: "";
    width: 44px;
    height: 44px;
    background: url("/static/ethel_img/icon_arrows.png") center right no-repeat;
    background-size: 22px 22px;
  }
}
</style>
<template>
  <div class="container">
    <div class="item flex-display">
      <span>姓名</span>
      <input type="text" class="flex-num-one" placeholder="请填写真实姓名" v-model="userName" />
    </div>
    <div class="item flex-display">
      <span>微信号</span>
      <input type="text" class="flex-num-one" placeholder="请填写微信号" v-model="userWx" />
    </div>
    <div class="item itemLine flex-display" @click="areaVisible = true">
      <span>所在地</span>
      <input
        type="text"
        class="flex-num-one"
        placeholder="请填写地址"
        readonly="readonly"
        v-model="userAds"
      />
    </div>
    <button class="auditBtn theme-background" @click="fnSubmit">提交</button>
    <mt-popup v-model="areaVisible" class="area-class" position="bottom">
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import { Indicator, Toast } from "mint-ui";
import api from "@/fetch/api";
const ADDRESS_DATA = require("../../../../static/pca-code.json");
let index = 0;
let index2 = 0;
// 初始化省
let province = ADDRESS_DATA.map(res => {
  return res.name;
});
// 初始化市
let city = ADDRESS_DATA[index].children.map(res => {
  return res.name;
});
// 初始化区
let area = ADDRESS_DATA[index].children[index2].children.map(res => {
  return res.name;
});
export default {
  name: "NewAudit",

  data() {
    return {
      userName: "", // 用户名称
      userWx: "", // 用户微信
      userAds: "", // 用户所在地址
      areaVisible: false, // 是否显示地址
      provinceData: "", // 省数据
      cityData: "", // 城市数据
      quxianData: "", // 区数据
      slots: [
        {
          flex: 1,
          values: province,
          className: "slot1",
          textAlign: "left"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: city,
          className: "slot3",
          textAlign: "left"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: area,
          className: "slot5",
          textAlign: "left"
        }
      ]
    };
  },
  methods: {
    onValuesChange(picker, values) {
      console.log(values)

      let one = values[0];
      let two = values[1];
      let three = values[2];
      console.log(values);
      index = province.indexOf(one);
      if (index >= 0 && province.length > 0) {
        city = ADDRESS_DATA[index].children.map(res => {
          return res.name;
        });
        picker.setSlotValues(1, city);
        two = values[1];
      }

      index2 = city.indexOf(two);
      if (index2 >= 0 && city.length > 0) {
        area = ADDRESS_DATA[index].children[index2].children.map(res => {
          return res.name;
        });
        picker.setSlotValues(2, area);
        three = values[2];
      }
      this.provinceData = values[0];
      this.cityData = values[1];
      this.quxianData = values[2];
      this.userAds = this.provinceData + this.cityData + this.quxianData;
    },
    fnSubmit() {
      let str = !this.userName
        ? "请填写真实姓名"
        : !this.userWx
        ? "请填写微信名称"
        : !this.userAds
        ? "请选择地址"
        : "";
      let params = {
        uid: this.ethelWxUserInfo.id,
        realname: this.userName,
        weixinewm: this.userWx,
        country: "中国",
        province: this.provinceData,
        city: this.cityData,
        quxian: this.quxianData
      };
      if (str) {
        Toast(str);
        return;
      }
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });

      api
        .setAudit(params)
        .catch(res => {
          Indicator.close();
          console.log(res);
          Toast(res.data.msg);
          if (!res.data.code) {
            setTimeout(() => {
              this.$router.go(-1);
            }, 2000);
          }
        })
        .then(err => {
          Indicator.close();
          console.log(err);
        });
    }
  },
  created() {
    document.title = '认证资料'
    // 获取缓存的用户信息
    this.ethelWxUserInfo = this.getlocalStorage(this.companyUnique);
  },
  components: {
    Toast,
    Indicator
  }
};
</script>

